<!-- eslint-disable vue/multi-word-component-names -->
<!-- @Author ： NWJ
        Version ： 1.0 -->

<script lang="js" name="Login">
import TopNav from '@/components/TopNav'
import axios from 'axios'
import { showMsg } from '@/utils/showMsg'
import { generateCanvasFingerprint } from '@/utils/generateFingerprint'
import LoginGlassCard from '@/components/LoginGlassCard'

export default {
  components: {
    TopNav,
    LoginGlassCard
  },

  data()
  {
    return {
      title: '登录',
      welcome: '😎欢迎使用智柜✨',
      nickname: '',
      acc: '',
      pwd: '',
      pwd2: ''
    }
  },

  computed: {
    canLogin()
    {
      return !(this.acc.length >= 6 && this.pwd.length >= 6)
    }
  },

  methods: {
    onLogin()
    {
      axios.post('/node/users/login', {
        account: this.acc,
        password: this.pwd
      })
        .then((response) =>
        {
          const res = response.data
          this.$store.dispatch('login', res.result.data.user)
          const canvasFingerprint = generateCanvasFingerprint()
          this.$store.dispatch('websocket/setupWebSocket', {
            canvasFingerprint,
            vm: this
          })
          showMsg('登录成功', '🥳欢迎回来~' + res.result.data.user.nickname, 'success')
          this.$router.push('/')
        })
        .catch((error) =>
        {
          const errorMessage = error.response.data.msg || '登录失败，请重试'
          showMsg('登录失败', '😬 ' + errorMessage, 'error')
        })
    },

    onRegister()
    {
      axios.post('/node/users/register', {
        nickname: this.nickname,
        account: this.acc,
        password: this.pwd
      })
        .then((response) =>
        {
          const res = response.data
          showMsg('注册成功', `🥳欢迎第 ${res.data.id} 位新用户:${res.data.account}~`, 'success')
        })
        .catch((error) =>
        {
          const errorMessage = error.response?.data.msg || '注册失败，请重试'
          showMsg('注册失败', '😬 ' + errorMessage, 'error')
        })
    }
  }
}
</script>

<template>
  <TopNav></TopNav>
  <LoginGlassCard></LoginGlassCard>
    <div class="card">
      <p class="title">{{ title }}</p>
      <p class="welcome">{{ welcome }}</p>
      <br>
      <form>
        <el-input v-model="nickname" class="acc" placeholder="昵称(非注册不填)">
          <template #prefix>
            <el-icon class="el-input__icon">
              <ship />
            </el-icon>
          </template>
        </el-input>
        <el-input v-model="acc" class="acc" placeholder="账号" autocomplete="username">
          <template #prefix>
            <el-icon class="el-input__icon">
              <user />
            </el-icon>
          </template>
        </el-input>
        <el-input v-model="pwd" class="pwd" type="password" show-password placeholder="密码"
          autocomplete="current-password">
          <template #prefix>
            <el-icon class="el-input__icon">
              <lock />
            </el-icon>
          </template>
        </el-input>
        <el-button type="primary" class="login-btn" :disabled="canLogin" @keyup.enter="onLogin" @click="onLogin" plain>
          登录
        </el-button>
        <el-button type="default" class="reg-btn" :disabled="canLogin" @keyup.space="onRegister" @click="onRegister"
          plain>
          注册
        </el-button>
      </form>
    </div>
</template>

<style scoped>
/* 确保全局样式不影响布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主容器 */
.main {
  background-image: url('@/assets/bg1.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* 卡片样式 */
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 60vh;
  min-height: 490px;
  border-radius: 30px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* 标题 */
.title {
  color: #4c4948;
  font-weight: 600;
  font-size: 30px;
  user-select: none;
}

/* 欢迎语 */
.welcome {
  font-size: 16px;
  color: #858585;
  user-select: none;
  margin-bottom: 20px;
}

/* 表单 */
form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 调整间距 */
  width: 100%;
  max-width: 300px;
}

/* 输入框 */
.acc,
.pwd {
  width: 100%;
}

/* 登录按钮 */
.login-btn {
  border-color: #425aef;
  color: #425aef;
  width: 100%;
  transition: all 0.3s ease;
  /* 平滑过渡 */
}

.login-btn:hover {
  background-color: #425aef;
  border-color: #425aef;
  color: #fff;
}

/* 注册按钮 */
.reg-btn {
  width: 100%;
  color: #86909c;
  background-color: #fff;
  border: 0;
  transition: all 0.3s ease;
  margin-left: 0;
}

.reg-btn:hover {
  color: #86909c;
  background-color: #f2f3f5;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .card {
    width: 90%;
    height: auto;
    min-height: 400px;
    padding: 15px;
  }

  .title {
    font-size: 24px;
  }

  .welcome {
    font-size: 14px;
  }

  form {
    gap: 15px;
  }
}
</style>
